﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
			<c:set var="ctx" value="${pageContext.request.contextPath}" />
			<html>

			<head>
				<link rel="stylesheet" href="${ctx}/common/common.css">
				<title>Title</title>
				<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
				<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
				<script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

				<script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
				<style type="text/css">
					.layui-table-header {
						width: 100%;
					}

					.layui-table-header th {
						width: 20%;
						text-align: center;
					}

					.layui-products {
						border-bottom: 2px solid #e7e7e7;
						/*border-top: 2px solid #e7e7e7;*/
						margin: 10px 0px;
						padding: 5px 0px;
					}

					.layui-products_li:first-child {
						border: none;
					}

					.layui-col-md4 img {
						margin-right: 5px;
						width: 22px;
						height: 22px;
					}

					.layui-col-md4 img {
						margin-right: 5px;
						width: 22px;
						height: 22px;
					}

					.valtop {
						padding: 9px;
					}

					.layui-layer-dialog {
						position: fixed;
						top: 217px !important;
						left: 50% !important;
						margin-left: -130px !important
					}
					.layui-unselect.layui-form-select {
						width: 100%;
					}
				</style>
			</head>

			<body style="height: 100%">
				<form class="layui-form layui-col-md12" action="${ctx}/traceProcess/updateQuota">
					<input type="hidden" name="id" id="id" value="${entity.id}" />
					<div class="layui-fluid">
						<button type="button" id="rollback" class="layui-btn layui-btn-primary goback">返回</button>
						<div class="layui-row layui-col-space15">
							<!--输入框内容盒子-->
							<div class="layui-col-md12">
								<div class="layui-form-item layui-col-md6">
									<label class="layui-form-label" style="width:20%">溯源流程代码：</label>
									<div class="layui-input-block valtop">${entity.code }</div>
								</div>
								<div class=" layui-col-md6">
									<label class="layui-form-label" style="width:20%">溯源流程名称：</label>
									<div class="layui-input-block valtop">${entity.name }</div>
								</div>
							</div>
						</div>
						<div id="addCard" class="layui-card-body"
							style="padding: 10px 0px; border-top: 1px solid #e7e7e7;">
							<c:forEach items="${entity.traceQuotaList }" var="tql" varStatus="st">
								<div class="layui-row quotaEditDiv" style="border-bottom: 1px dashed #e7e7e7;">
									<div class="layui-row layui-col-space12 layui-products_li" style="border: none;">
										<div class="layui-col-md1 valtop"
											style="display: flex;justify-content: center;">
											<input type="hidden" name="traceQuotaList[${st.index }].id"
												value="${tql.id}">
											<img class="shanchu" src="${ctx}/common/plugins/images/u.png">
										</div>
										<div class="layui-col-md4 valtop">
											<span style="display: inline-block; float: left;">指标代码<span
													style="color: red">*</span>：</span>
											<div class="layui-input-block">
												<input type="text" name="traceQuotaList[${st.index }].code"
													value="${tql.code }" lay-verify="isNumberCode" placeholder="请输入指标代码"
													autocomplete="off" class="layui-input">
											</div>
										</div>
										<div class="layui-col-md7 valtop">
											<span style="display: inline-block; float: left;">采集方式<span
													style="color: red">*</span>：</span>
											<div class="layui-input-block">
												<select name="traceQuotaList[${st.index }].gatherMethod">
													<option value="1" <c:if test="${tql.gatherMethod eq '1'}">
														selected=selected</c:if>>手工录入</option>
													<option value="2" <c:if test="${tql.gatherMethod eq '2'}">
														selected=selected</c:if>>设备采集</option>
												</select>
											</div>
										</div>
									</div>
									<div class="layui-row layui-col-space12 layui-products_li" style="border: none;">
										<div class="layui-col-md1 valtop"></div>
										<div class="layui-col-md4 valtop">
											<span style="display: inline-block; float: left;">指标名称<span
													style="color: red">*</span>：</span>
											<div class="layui-input-block">
												<input type="text" name="traceQuotaList[${st.index }].name"
													value="${tql.name }" lay-verify="required" placeholder="请输入指标名称"
													autocomplete="off" class="layui-input">
											</div>
										</div>
										<div class="layui-col-md7 valtop">
											<span style="display: inline-block; float: left;">是否公开<span
													style="color: red">*</span>：</span>
											<div class="layui-input-block">
												<select name="traceQuotaList[${st.index }].shareStat"
													lay-filter="aihao">
													<option value="0" <c:if test="${tql.shareStat eq '0'}">
														selected=selected</c:if>>否</option>
													<option value="1" <c:if test="${tql.shareStat eq '1'}">
														selected=selected</c:if>>是</option>
												</select>
											</div>
										</div>
									</div>
									<div class="layui-row layui-col-space12 layui-products_li" style="border: none;">
										<div class="layui-col-md1 valtop">
										</div>
										<div class="layui-col-md4 valtop">
											<span style="display: inline-block; float: left;">指标单位：</span>
											<div class="layui-input-block">
												<input type="text" name="traceQuotaList[${st.index }].unit"
													value="${tql.unit }" placeholder="请输入指标单位" autocomplete="off"
													class="layui-input">
											</div>
										</div>
										<div class="layui-col-md7 valtop">
											<span style="display: inline-block; float: left;">是否必填<span
													style="color: red">*</span>：</span>
											<div class="layui-input-block">
												<select name="traceQuotaList[${st.index }].isInput">
													<option value="0" <c:if test="${tql.isInput eq '0'}">
														selected=selected</c:if>>否</option>
													<option value="1" <c:if test="${tql.isInput eq '1'}">
														selected=selected</c:if>>是</option>
												</select>
											</div>
										</div>
									</div>
									<div class="layui-row layui-col-space12 layui-products_li" style="border: none;">
										<div class="layui-col-md1 valtop">
										</div>
										<div class="layui-col-md4 valtop">
											<span style="display: inline-block; float: left;">采集类型<span
													style="color: red">*</span>：</span>
											<div class="layui-input-block">
												<select name="traceQuotaList[${st.index }].quotaType" lay-filter="aihao"
													style="width: 200px;">
													<option value="1" <c:if test="${tql.quotaType eq '1'}">
														selected=selected</c:if>>字符</option>
													<option value="2" <c:if test="${tql.quotaType eq '2'}">
														selected=selected</c:if>>数值</option>
													<option value="3" <c:if test="${tql.quotaType eq '3'}">
														selected=selected</c:if>>日期</option>
													<option value="4" <c:if test="${tql.quotaType eq '4'}">
														selected=selected</c:if>>日期时间</option>
													<option value="5" <c:if test="${tql.quotaType eq '5'}">
														selected=selected</c:if>>图片</option>
													<option value="6" <c:if test="${tql.quotaType eq '6'}">
														selected=selected</c:if>>音视频</option>
												</select>
											</div>
										</div>
										<div class="layui-col-md7 valtop">
											<span style="display: inline-block; float: left;">备注：</span>
											<div class="layui-input-block">
												<textarea name="traceQuotaList[${st.index }].described"
													placeholder="请输入备注"
													class="layui-textarea">${tql.described }</textarea>
											</div>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<!--通用按钮盒子-->
						<div class="layui-col-md12">
							<div style="text-align: center;">
								<div class="layui-btn" id="addTechnic">添加溯源指标</div>
								<button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo">保存</button>
							</div>
						</div>
					</div>
				</form>

				<script>
					//Demo
					layui.use('form', function () {
						var form = layui.form;

						//监听提交
						form.on('submit(formDemo)', function (data) {
							layer.load(1, {
								shade: [0.1, '#fff'] //0.1透明度的白色背景
							});
							$("#formBtn").attr("disabled", true);
						});
					});

					layui.use('laydate', function () {
						var laydate = layui.laydate;
						//执行一个laydate实例
						laydate.render({
							elem: '#intoProductionTime' //指定元素
							, type: 'datetime'
						});
					});

					var qindex = 0
					var btnNum = 0
					layui.use('form', function () {
						var $ = layui.$;
						var form = layui.form;
						//给按钮绑定active中的方法
						$(".paramBtn .layui-btn").on("click", function () {
							var type = $(this).data('type');
							//查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
							active[type] ? active[type].call() : '';
						})
						$(document).on('click', '#addTechnic', function () {
							if (btnNum == 0) {
								qindex = $(".quotaEditDiv").length;
							}
							var str = '';
							str += '<div class="layui-row quotaEditDiv" style="border-bottom: 1px dashed #e7e7e7;">';
							str += '	<div class="layui-row layui-col-space12 layui-products_li"';
							str += '		style="border: none;">';
							str += '		<div class="layui-col-md1 valtop" style="display: flex;justify-content: center;">';
							str += '			<input type="hidden" name="traceQuotaList[' + qindex + '].id" value="">';
							str += '			<img class="shanchu" src="${ctx}/common/plugins/images/u.png">';
							str += '		</div>';
							str += '		<div class="layui-col-md4 valtop">';
							str += '			<span style="display: inline-block; float: left;">指标代码<span style="color: red">*</span>：</span>';
							str += '			<div class="layui-input-block">';
							str += '				<input type="text" name="traceQuotaList[' + qindex + '].code" value="" lay-verify="isNumberCode" placeholder="请输入指标代码" autocomplete="off" class="layui-input">';
							str += '			</div>';
							str += '		</div>';
							str += '		<div class="layui-col-md7 valtop">';
							str += '			<span style="display: inline-block; float: left;">采集方式<span style="color: red">*</span>：</span>';
							str += '			<div class="layui-input-block">';
							str += '				<select name="traceQuotaList[' + qindex + '].gatherMethod">';
							str += '					<option value="1">手工录入</option>';
							str += '					<option value="2">设备采集</option>';
							str += '				</select>';
							str += '			</div>';
							str += '		</div>';
							str += '	</div>';
							str += '	<div class="layui-row layui-col-space12 layui-products_li"';
							str += '		style="border: none;">';
							str += '		<div class="layui-col-md1 valtop">';
							str += '		</div>';
							str += '		<div class="layui-col-md4 valtop">';
							str += '			<span style="display: inline-block; float: left;">指标名称<span style="color: red">*</span>：</span>';
							str += '			<div class="layui-input-block">';
							str += '				<input type="text" name="traceQuotaList[' + qindex + '].name" value="" lay-verify="required" placeholder="请输入指标名称" autocomplete="off" class="layui-input">';
							str += '			</div>';
							str += '		</div>';
							str += '		<div class="layui-col-md7 valtop">';
							str += '			<span style="display: inline-block; float: left;">是否公开<span style="color: red">*</span>：</span>';
							str += '			<div class="layui-input-block">';
							str += '			<select name="traceQuotaList[' + qindex + '].shareStat" lay-filter="aihao">';
							str += '				<option value="0">否</option>';
							str += '				<option value="1">是</option>';
							str += '			</select>';
							str += '			</div>';
							str += '		</div>';
							str += '	</div>';
							str += '	<div class="layui-row layui-col-space12 layui-products_li"';
							str += '		style="border: none;">';
							str += '		<div class="layui-col-md1 valtop">';
							str += '		</div>';
							str += '		<div class="layui-col-md4 valtop">';
							str += '			<span style="display: inline-block; float: left;">指标单位：</span>';
							str += '			<div class="layui-input-block">';
							str += '				<input type="text" name="traceQuotaList[' + qindex + '].unit" value="" placeholder="请输入指标单位" autocomplete="off" class="layui-input">';
							str += '			</div>';
							str += '		</div>';
							str += '		<div class="layui-col-md7 valtop">';
							str += '			<span style="display: inline-block; float: left;">是否必填<span style="color: red">*</span>：</span>';
							str += '			<div class="layui-input-block">';
							str += '			<select name="traceQuotaList[' + qindex + '].isInput">';
							str += '				<option value="0">否</option>';
							str += '				<option value="1">是</option>';
							str += '			</select>';
							str += '			</div>';
							str += '		</div>';
							str += '	</div>';
							str += '	<div class="layui-row layui-col-space12 layui-products_li"';
							str += '		style="border: none;">';
							str += '		<div class="layui-col-md1 valtop">';
							str += '		</div>';
							str += '		<div class="layui-col-md4 valtop">';
							str += '			<span style="display: inline-block; float: left;">采集类型：</span>';
							str += '			<div class="layui-input-block">';
							str += '			<select name="traceQuotaList[' + qindex + '].quotaType" lay-filter="aihao">';
							str += '				<option value="1">字符</option>';
							str += '				<option value="2">数值</option>';
							str += '				<option value="3">日期</option>';
							str += '				<option value="4">日期时间</option>';
							str += '				<option value="5">图片</option>';
							str += '				<option value="6">音视频</option>';
							str += '			</select>';
							str += '			</div>';
							str += '		</div>';
							str += '		<div class="layui-col-md7 valtop">';
							str += '			<span style="display: inline-block; float: left;">描述：</span>';
							str += '			<div class="layui-input-block">';
							str += '				<textarea name="traceQuotaList[' + qindex + '].described" placeholder="请输入描述" class="layui-textarea"></textarea>';
							str += '			</div>';
							str += '		</div>';
							str += '	</div>';
							str += '</div>';

							$("#addCard").append(str);
							qindex++;
							btnNum++;
							form.render();
						});
						$(document).on('click', '.shanchu', function () {
							var qId = $(this).prev().val();
							var obj = this;
							if (qId == undefined || qId == '') {
								layer.confirm('确认删除？', function (index) {
									layer.close(index);
									$(obj).parent().parent().parent().remove();
								})
							} else {
								layer.confirm('确认删除？', function (index) {
									layer.close(index);
									$.post("${ctx}/traceProcess/deleteQuota", { quptaId: qId }, function (data) {
										if (data == '1') {
											layer.alert("删除成功");
											$(obj).parent().parent().parent().remove();
										} else {
											layer.alert("删除失败");
										}
									}, "text")
								})
							}

						});
						$(document).on('click', '#backBtn', function () {
							history.go(-1);
						});
					});
					layui.use('form', function () {
						var $ = layui.$;
						var form = layui.form;
						form.verify({
							isNumberCode: function (value, item) {
								if (value.trim().length <= 0) {
									return "必填项不能为空";
								}
								var reg = /^[0-9a-zA-Z]*$/
								if (value.trim().length > 0) {
									if (!reg.test(value)) {
										return "只能填写数字或字母";
									}
								}
							}
						});
					});
					document.getElementById("rollback").addEventListener("click", function () {
						//window.history.back();
						var id = document.getElementById("id").value;
						window.location.href = '${ctx}/traceProcess/toQuotaView/' + id;
					})
				</script>
			</body>

			</html>